<template>
  <div id="container">
    <!--公告通知-->
    <div class="notice">
      <div class="title hidden-xs-only">公告通知</div>
      <span
        :class="[active==item.type?'active':'']"
        @click="active=item.type; page=1; getNoticeList(item.type);"
        v-for="item in typeList"
        :key="item.type"
      >{{item.name}}</span>
    </div>
    <!--维修通知-->
    <div class="repair_notice">
      <div class="title">维修通知</div>
      <div class="table">
        <ul>
          <router-link
            target="_blank"
            :to="'/noticelist/noticeinfo/'+item.id"
            v-for="item in noticeData"
            :key="item.id"
            tag="a"
          >
            <p class="ptitle">{{item.title}}</p>
            <p class="pdate">{{item.time | dateFormat}}</p>
          </router-link>
        </ul>
      </div>
    </div>
    <!--分页组件-->
    <el-row class="page">
      <el-col :span="24">
        <el-pagination
          small
          background
          layout="prev ,pager,next"
          :total="pagesCount*10"
          :current-page.sync="page"
          :pager-count="5"
          @current-change="getNoticeList(active)"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "",
      typeList: [], //类目列表
      noticeData: [], // 数据列表
      page: 1, // 当前页码
      pagesCount: 1 //总页数
    };
  },
  mounted() {
    this.getTypeLis();
    this.getNoticeList(1);
  },
  methods: {
    //获取类目
    getTypeLis() {
      this.$axios
        .get("/api/article/queryTypeByPlace/1")
        .then(res => {
          this.typeList = res.data.list;
          this.active = this.typeList[0].type;
        })
        .catch(err => {
          this.$message.error("获取类目失败");
        });
    },
    //获取公告列表
    getNoticeList(type) {
      this.$axios
        .get(
          "/api/article/queryArticleListByType/" +
            type +
            "/" +
            this.page +
            "/15"
        )
        .then(res => {
          this.noticeData = res.data.articles;
          this.pagesCount = res.data.pagesCount;
        })
        .catch(err => {
          this.$message.error("获取列表失败");
        });
    }
  }
};
</script>

<style lang="scss" scoped>
#container {
  display: flex;
  max-width: 1200px;
  margin: 10px auto;
  flex-wrap: wrap;
  /*公告通知*/
  .notice {
    display: flex;
    flex-direction: column;
    width: 20%;
    border: 1px solid #eee;
    .active {
      background: #0075a9;
      color: #ffffff;
    }
    span {
      display: block;
      margin: 10px 10px;
      text-align: center;
      background-color: #eee;
      color: #0075a9;
      line-height: 50px;
      font-weight: bold;
      cursor: pointer;
    }
    span:hover {
      background: #0075a9;
      color: #ffffff;
    }
  }
  /*维修通知*/
  .repair_notice {
    width: 75%;
    min-height: 500px;
    margin-left: 20px;
    border: 1px;
    .table {
      a {
        list-style: none;
        padding: 0 20px;
        line-height: 40px;
        height: 40px;
        cursor: pointer;
        display: block;
      }
      a:nth-child(even) {
        background: #fafafa;
      }
      a:hover {
        background: #eee;
      }

      .pdate {
        float: right;
        font-size: 14px;
        color: #383838;
      }
      .ptitle {
        width: 70%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        height: 40px;
      }
      a:hover {
        color: #0075a9;
      }
    }
  }
  /*分页组件*/
  .page {
    margin: 10px auto;
  }
}
.title {
  line-height: 50px;
  color: #0075a9;
  font-weight: bold;
  border-bottom: 3px solid #0075a9;
  background: #f6f4f0;
  padding-left: 20px;
}
@media screen and (max-width: 768px) {
  #container {
    margin: 0;
    .repair_notice {
      .table {
        a {
          padding-right: 0px;
        }
      }
    }
    .notice {
      width: 100%;
      flex-direction: row;
      border: none;
      span {
        margin: 2px;
        width: 100%;
        line-height: 30px;
        font-size: 0.75em;
      }
    }
    .repair_notice {
      margin: 0;
      width: 100%;
      .table {
        a {
          display: flex;
        }
      }
    }
  }
}
</style>